<script>
  // @ts-nocheck
    import { writable } from "svelte/store";
    import { Center , Textarea,TextInput,Button, } from '@svelteuidev/core';
    import { goto } from "$app/navigation";
    let topics = writable([]);
    let newTopic = {
        title: "",
        description: "",
        content:""
    };
    const addTopic = () => {
        if (newTopic.title && newTopic.description&&newTopic.content) {
          fetch('/api/createlist', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(newTopic)
          })
            .then((v)=>(v.json()))
            .then((v) => {
              // console.log(newTopic)
              if (v.status !== 0) {
                console.log(v.status)
                console.log(v.msg)
                console.log('add failed');
                return;
              }
              console.log('add success');
              goto('/List')
            })
            .catch((e) => {
              if (!e.message) {
                console.log(e);
              } else {
                console.log(e.message);
              }
            });
        }
    };
</script>

  <div class="main">
      <div class="topic-form" >
        <TextInput
            type="text"
            placeholder="Topic title"
            bind:value={newTopic.title}
        />
        <TextInput
            type="text"
            placeholder="Topic description"
            bind:value={newTopic.description}
            
        />
        <Textarea
            placeholder="Topic content"
            bind:value={newTopic.content}
        ></Textarea>
        <Button on:click={addTopic}>Create Topic</Button>
    </div>
  </div>



<style>
    .main {
      display: flex;
      align-content: center;
      justify-content: space-around;
      flex-wrap: wrap;
      height: 900px;
      align-items: center; /* 垂直居中 */
    }
    .topic-form {
      display: flex;
      flex-direction: column;
      width: 800px;
      height: 300px;
      gap: 2rem;
      border: 2px;
      border-color: blue;
    }
    .topic-form input{
      padding: 0.5rem;
      font-size: 3rem;
    }
  </style>
